<template>
  <div id="details">
    <Nav />
    <div class="ListDetails">
      <div class="ListDetails-heade">
        <div class="ListDetails-heade-p">
          <p>课程</p>
          <p class="slash">\</p>
          <p>前端开发</p>
          <p class="slash">\</p>
          <p>HTML/CSS</p>
          <p class="slash">\</p>
          <p>初始HTML(5)+CSS(3)-2020升级版</p>
        </div>
        <div class="collection">
          <p class="el-icon-star-off">
            <span class="collection-span">收藏</span>
          </p>
          <p class="iconfont icon-weixin"></p>
          <p class="iconfont icon-qq"></p>
          <p class="iconfont icon-xinlang"></p>
        </div>
      </div>
      <div class="title">
        <div class="title-header">
          <h2>初始HTNL(5)+CSS(3)-2020升级版</h2>
        </div>
        <div class="title-photo">
          <template>
            <div class="demo-type">
              <el-avatar :size="48" @error="errorHandler">
                <img src="https://img3.mukewang.com/54584f6d0001759002200220-80-80.jpg" />
              </el-avatar>
            </div>
          </template>
          <div class="title-consumer">
            <p class="title-consumer-name">
              丶五月的夏天
              <i class="iconfont icon-huore"></i>
            </p>
            <p>web前端工程师</p>
          </div>
          <div class="Difficulty">
            <span class="sport">难度</span>
            <span>入门</span>
            <span class="spot">·</span>
            <span class="sport">时长</span>
            <span>9小时18分</span>
            <span class="spot">·</span>
            <span class="sport">学习人数</span>
            <span>1132935</span>
            <span class="spot">·</span>
            <span class="sport">综合评分</span>
            <span>9.50</span>
          </div>
          <div class="title-item"></div>
          <div class="learning"></div>
        </div>
      </div>
    </div>
    <div class="Horizontal">
      <template>
        <el-tabs v-model="activeName" @tab-click="handleClick">
          <el-tab-pane label="章节课程" name="first">
            <div class="Introduction">
              <span>
                简介：2020升级版来了，课程将持续更新....本课程从最基本的概念开始讲起，步步深入，带领大家学习HTML(5)、CSS(3)样式基础知识，
                了解各种常用标签的意义以及基本用法，后半部分教程主要讲解CSS(3)样式代码添加，为后面的案例课程打下基础。
              </span>
            </div>
            <div class="Introduction" v-for="(item,index) in 5" :key="index">
              <h2>第一章 HTML5介绍</h2>
              <span>本章节主要讲解html5和css3样式的关系，以及html5标签语法，文档结构,最后讲解了在html5中的注释代码的作用。</span>
              <div>
                <ul>
                  <li class="listing">
                    <span>
                      <i class="iconfont icon-zuoyoujiantou leftright"></i>
                      1-1 代码初体验，制作我的第一个网页
                    </span>

                    <span class="Begin">开始学习</span>
                  </li>
                  <li class="listing">
                    <span>
                      <i class="iconfont icon-zuoyoujiantou leftright"></i>
                      1-2 佛靠金装，人靠衣装- html和css的关系
                    </span>
                    <span class="Begin">开始学习</span>
                  </li>
                  <li class="listing">
                    <span>
                      <i class="iconfont icon-zuoyoujiantou leftright"></i>
                      1-3 使用说明书-标签的语法
                    </span>
                    <span class="Begin">开始学习</span>
                  </li>
                  <li class="listing">
                    <span>
                      <i class="iconfont icon-zuoyoujiantou leftright"></i>
                      1-4 听说有新版本了? - html5文档结构
                    </span>
                    <span class="Begin">开始学习</span>
                  </li>
                  <li class="listing">
                    <span>
                      <i class="iconfont icon-zuoyoujiantou leftright"></i>
                      1-5 小哥,做头么? -认识head标签
                    </span>
                    <span class="Begin">开始学习</span>
                  </li>
                  <li class="listing">
                    <span>
                      <i class="iconfont icon-zuoyoujiantou leftright"></i>
                      1-6 你就是馋人家的身子-认识body标签
                    </span>
                    <span class="Begin">开始学习</span>
                  </li>
                  <li class="listing">
                    <span>
                      <i class="iconfont icon-zuoyoujiantou leftright"></i>
                      1-7 解释不等于掩饰- html文件注释
                    </span>
                    <span class="Begin">开始学习</span>
                  </li>
                </ul>
              </div>
            </div>
          </el-tab-pane>
          <el-tab-pane label="问答评论" name="second"></el-tab-pane>
          <el-tab-pane label="同学笔记" name="third"></el-tab-pane>
          <el-tab-pane label="用户评价" name="fourth"></el-tab-pane>
        </el-tabs>
      </template>
      <div class="RightList">
        <el-card class="box-card">
          <div class="text item">
            <el-row>
              <el-button type="danger" round>开始学习</el-button>
            </el-row>
            <dl class="first">
              <dt>课程须知</dt>
              <dd>没有任何WEB经验的WEB应用程序开发者、对WEB前端技术感兴趣的用户均可学习本教程。</dd>
            </dl>
            <dl class="first">
              <dt>老师告诉你能学到什么？</dt>
              <dd>本教程代领大家轻松学习HTML(5)、CSS(3)样式基础知识，可以利用HTML(5)、CSS(3)样式技术制作出简单页面。</dd>
            </dl>
          </div>
        </el-card>
        <div class="Experience">
          <img src="https://img.mukewang.com/5e9813a009ea5a2603480172.jpg" alt />
        </div>
        <div class="courses">
          <h4>推荐课程</h4>
        </div>
        <div class="Recommended-List">
          <div class="Card">
            <img src="https://img2.mukewang.com/szimg/59eeb022000162bc05400300-360-202.jpg" alt />
            <p>实战</p>
          </div>
          <div class="cart-List">
            <p class="refactoringAPP">算法与数据结构-综合提升 C++版</p>
            <span>￥166.00</span>
            <span class="point">·</span>
            <span>中级</span>
            <span class="point">·</span>
            <span class="el-icon-user">9752</span>
          </div>
        </div>
        <div class="Recommended-List" v-for="(item,index) in 4" :key="index">
          <div class="Card">
            <img src="https://img3.mukewang.com/szimg/5becd5ad0001b89306000338-360-202.jpg" alt />
            <p>实战</p>
          </div>
          <div class="cart-List">
            <p class="refactoringAPP">Vue.js2.5+cube-ui重构饿了么App（经典再升级）</p>
            <div class="Lists">
              <span>￥198.00</span>
              <span class="point">·</span>
              <span>中级</span>
              <span class="point">·</span>
              <span class="el-icon-user">9564</span>
            </div>
          </div>
        </div>
        <div class="courses">
          <h4>热门专题标签</h4>
          <div class="label">
            <div class="label-Spring">
              <p class="Spring">Java Spring技术栈</p>
              <p class="Imitation">仿站开发</p>
              <p class="sql">电商项目sql优化</p>
              <p class="Android">Android最新面试技巧</p>
              <p class="stack">全栈工程师</p>
              <p class="jQuery">用jQuery实现一个小应用</p>
              <p class="Node">Node.js进阶教程</p>
            </div>
          </div>
        </div>
        <div class="Related">
          <h4>相关课程</h4>
          <div class="Recommended-List" v-for="(item,index) in 4" :key="index">
            <div class="Card">
              <img src="https://www.imooc.com/courseimg/s/cover015_s.jpg" alt />
            </div>
            <div class="cart-List">
              <p class="refactoringAPP">带你走入前端动画的世界</p>
              <span>入门</span>
              <span class="point">·</span>
              <span class="el-icon-user">20456</span>
            </div>
          </div>
        </div>
      </div>
    </div>
    <Backtop />
    <Footer />
  </div>
</template>
    </div>
  </div>
</template>
      </div>
    </div>
  </div>
</template>

<script>
import Nav from "../components/nav";
import Footer from "../components/Footer";
import Backtop from "../components/Backtop";
export default {
  data() {
    return {
      activeName: "first"
    };
  },
  components:{
    Nav,
    Footer,
    Backtop
  },
  methods: {
    handleClick(tab, event) {
      console.log(tab, event);
    },
    errorHandler() {
      return true;
    }
  }
};
</script>

<style>
@import url("../assets/icon/download/font_1923160_z3gb14wjiaa/iconfont.css");
* {
  margin: 0;
  padding: 0;
}
ul {
  list-style: none;
}
#details {
  color: #1c1f21;
  background: #f8fafc;
}
#details .ListDetails {
  height: 200px;
  background: url(../assets/img/详情header.png) no-repeat 0 0 / 100% 100%;
}
#details .ListDetails-heade {
  width: 1200px;
  margin: auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 20px;
}
#details .ListDetails-heade-p {
  font-size: 12px;
  color: #88898b;
  line-height: 12px;
  display: flex;
  align-items: center;
}
#details .slash {
  padding: 0 10px;
}
#details .collection {
  color: #b1b3b6;
  display: flex;
  align-items: center;
}
#details .collection > p {
  margin-right: 30px;
  font-size: 20px;
}
#details .collection-span {
  font-size: 14px !important;
  line-height: 50px;
}
#details .title {
  width: 1200px;
  margin: auto;
}
#details .title-header > h2 {
  position: relative;
  z-index: 1;
  margin-bottom: 8px;
  line-height: 48px;
  font-size: 32px !important;
  color: #fff;
  text-align: left;
}
#details .title-photo {
  display: flex;
  justify-content: left;
  align-items: center;
}
#details .title-consumer {
  margin-left: 7px;
  font-size: 14px;
  line-height: 22px;
  font-weight: 700;
  color: #fff;
}
#details .title-consumer > .title-consumer-name > i {
  color: #d81e06 !important;
}
#details .Difficulty {
  color: #ffffff;
  padding-right: 8px;
  line-height: 12px;
  font-size: 12px;
  font-weight: 700;
  margin-left: 60px;
}
#details .sport {
  margin-right: 7px;
}
#details .spot {
  margin: 0 20px;
}
#details .Horizontal {
  width: 1200px;
  margin: auto;
  display: flex;
  justify-content: space-between;
}
#details .Introduction {
  margin-top: 25px;
  width: 740px;
  border: 1px solid #f8fafc;
  line-height: 28px;
  margin-bottom: 8px;
  padding: 24px 32px 32px;
  background: #fff;
  box-shadow: 0 8px 16px 0 rgba(7, 17, 27, 0.1);
  border-radius: 12px;
  font: 14px/1.5 "PingFang SC", "微软雅黑", "Microsoft YaHei", Helvetica,
    "Helvetica Neue", Tahoma, Arial, sans-serif;
  text-align: left;
}
#details .leftright {
  color: white;
  padding: 3px 3px;
  margin-right: 10px;
  background: #9199a1;
  border-radius: 50%;
}
#details .listing {
  padding: 15px 0;
  padding-left: 10px;
  width: 100%;
  display: flex;
  justify-content: space-between;
}
#details .Begin {
  font-size: 12px;
  padding: 3px 12px;
  background: #f20d0d;
  color: white;
  border-radius: 20px;
  display: none;
}
#details .listing:hover {
  background: #fef3f3;
  color: #f20d0d;
}
#details .listing:hover .Begin {
  font-size: 12px;
  padding: 3px 12px;
  background: #f20d0d;
  color: white;
  border-radius: 20px;
  display: block;
}
#details .listing:hover .leftright {
  background: #f20d0d;
}
#details .RightList .box-card.el-card__body {
  height: 270px;
  padding: 24px 32px 32px !important;
  background: #fff;
  box-shadow: 0 8px 16px 0 rgba(7, 17, 27, 0.1);
  border-radius: 12px;
}
#details .RightList {
  position: relative;
  top: -80px;
  width: 320px;
  background: #f8fafc;
  border-radius: 12px;
}
#details .box-card {
  height: 326px;
  width: 320px;
  border-radius: 12px !important;
}
#details .el-button--danger {
  background-color: #f20d0d !important;
  border-color: #f20d0d !important;
  color: #fff !important;
  padding: 11px 32px !important;
  font-size: 16px !important;
  line-height: 24px !important;
  border-radius: 24px !important;
  width: 256px;
}
#details .el-button--danger:hover {
  background-color: #c20a0a !important;
  border-color: #c20a0a !important;
  color: #faecec !important;
  padding: 11px 32px !important;
  font-size: 16px !important;
  line-height: 24px !important;
  border-radius: 24px !important;
  width: 256px;
}
#details .first {
  margin-bottom: 24px;
  margin-top: 15px;
}
#details .first dt {
  margin-bottom: 6px;
  font-weight: 700;
  font-size: 14px;
  text-align: left;
}
#details .first dd {
  font-size: 12px;
  line-height: 24px;
  color: #545c63;
  white-space: pre-line;
  text-align: left;
}
#details .Experience {
  max-height: 160px;
  min-height: 60px;
  width: 100%;
  overflow: hidden;
  margin: -8px 0 24px;
  cursor: pointer;
  position: relative;
  z-index: 899;
  /* display: none; */
  line-height: 0;
  border-radius: 12px;
  margin-top: 25px;
}
#details .Experience > img {
  width: 100%;
  height: 100%;
}
#details .Recommended-List {
  display: flex;
  margin-bottom: 15px;
}
#details .Recommended-List .Card {
  float: left;
  width: 80px;
  height: 60px;
  border-radius: 6px;
  overflow: hidden;
  position: relative;
}
#details .Recommended-List .Card > img {
  width: 100%;
  height: 100%;
}
#details .Recommended-List .Card > p {
  position: absolute;
  left: 0;
  top: 0;
  font-size: 12px;
  color: #ffffff;
  line-height: 18px;
  padding: 2px 4px;
  background: #1c1f21;
  border-radius: 6px 0 6px 0;
}
#details .cart-List {
  text-align: left;
  color: #545c63;
  background: #f8fafc;
  margin-left: 15px;
  border-bottom: 1px rgba(43, 51, 59, 0.1) solid;
}
#details .cart-List > .refactoringAPP {
  width: 224px;
  padding-top: 8px;
  font-size: 14px;
  height: 22px;
  line-height: 22px;
  margin-bottom: 4px;
  cursor: pointer;
  color: #545c63;
  background: #f8fafc;
  -webkit-transition: all 0.3s;
  -moz-transition: all 0.3s;
  transition: all 0.3s;
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
#details .point {
  margin: 0 10px;
  font-weight: 700;
}
#details .cart-List > span {
  font-size: 12px;
  color: #545c63;
  line-height: 18px;
}
#details .cart-List > .Lists > span {
  font-size: 12px;
  color: #545c63;
  line-height: 18px;
}
#details .cart-List:hover .Lists {
  display: none;
}
#details .cart-List:hover .refactoringAPP {
  white-space: pre-wrap;
  overflow: visible;
}
#details .courses > h4 {
  font-weight: 700;
  font-size: 14px;
  margin-bottom: 12px;
  text-align: left;
}
#details .label-Spring {
  display: flex;
  flex-wrap: wrap;
}
#details .label-Spring > .Spring {
  margin-right: 8px;
  margin-bottom: 8px;
  padding: 6px 12px;
  background: #f9f2e7;
  color: #feac32;
  font-size: 14px;
  line-height: 20px;
  border-radius: 16px;
}
#details .label-Spring > .Imitation {
  margin-right: 8px;
  margin-bottom: 8px;
  padding: 6px 12px;
  background: #f9ebe2;
  color: #ff6c0a;
  font-size: 14px;
  line-height: 20px;
  border-radius: 16px;
}
#details .label-Spring > .sql {
  margin-right: 8px;
  margin-bottom: 8px;
  padding: 6px 12px;
  background: #f9ebe2;
  color: #ff3300;
  font-size: 14px;
  line-height: 20px;
  border-radius: 16px;
}
#details .label-Spring > .Android {
  margin-right: 8px;
  margin-bottom: 8px;
  padding: 6px 12px;
  background: #fcca7e;
  color: #fff;
  font-size: 14px;
  line-height: 20px;
  border-radius: 16px;
}
#details .label-Spring > .stack {
  margin-right: 8px;
  margin-bottom: 8px;
  padding: 6px 12px;
  background: #fcb07e;
  color: #fff;
  font-size: 14px;
  line-height: 20px;
  border-radius: 16px;
}
#details .label-Spring > .jQuery {
  margin-right: 8px;
  margin-bottom: 8px;
  padding: 6px 12px;
  background: #f9f1e2;
  color: #fea92a;
  font-size: 14px;
  line-height: 20px;
  border-radius: 16px;
}
#details .label-Spring > .Node {
  margin-right: 8px;
  margin-bottom: 8px;
  padding: 6px 12px;
  background: #f9ebe2;
  color: #ff6600;
  font-size: 14px;
  line-height: 20px;
  border-radius: 16px;
}
#details .Related > h4 {
  font-weight: 700;
  font-size: 14px;
  margin-bottom: 12px;
  text-align: left;
  margin-top: 30px;
}
</style>